<template>
    <el-row class="orderdetail">
        <el-col :span="24" class="content-header">订单详情</el-col>
        <el-card class="box">
            <el-col :span="24">
                <el-button-group>
                  <el-button type="primary" size='small' :disabled="buttonDisabled[0]">审核</el-button>
                  <el-button type="primary" size='small' :disabled="buttonDisabled[1]" @click="formVisible = true;deliverGoodsDialogFormVisible = true;dialogTitle='填写发货地址';">发货</el-button>
                  <el-button type="primary" size='small' :disabled="buttonDisabled[2]">签收</el-button>
                  <el-button type="primary" size='small' :disabled="buttonDisabled[3]">归档</el-button>
                </el-button-group>
                <el-button type="warning" size='small' :disabled="buttonDisabled[4]">添加支付记录</el-button>
                <el-button type="warning" size='small' :disabled="buttonDisabled[5]">修改订单总金额</el-button>
                <el-button type="danger" size='small' :disabled="buttonDisabled[6]">修改订单总金额</el-button>
                <el-button type="primary" size='small' @click="returnPage">返回</el-button>
            </el-col>
            <el-col :span="24" class="order-body">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="订单信息" name="1">
                        <el-row class="panel">
                            <el-col :span="24" class="panel-handing">订单信息</el-col>
                            <el-col :span="24" class="panel-body">
                                <el-table :data="orderData" border >
                                    <el-table-column prop="orderNo" label="编号" width="160">
                                    </el-table-column>
                                    <el-table-column prop="number" label="数量" width="80">
                                    </el-table-column>
                                    <el-table-column prop="createDate" label="创建日期"  width="100">
                                    </el-table-column>
                                    <el-table-column prop="orderState" label="订单状态" width="80">
                                        <template slot-scope="scope">
                                            <el-tag type="info">{{scope.row.orderState}}</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="payState" label="支付状态" width="80">
                                        <template slot-scope="scope">
                                            <el-tag type="info">{{scope.row.payState}}</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="orderTotalPrice" label="订单金额" width="80">
                                    </el-table-column>
                                    <el-table-column prop="productPrice" label="商品金额" width="80">
                                    </el-table-column>
                                    <el-table-column prop="distributionFee" label="配送费" width="80">
                                    </el-table-column>
                                    <el-table-column label="收货人">
                                        <template slot-scope="scope">
                                            <el-col :span="24">
                                                <b>姓名：</b>
                                                {{scope.row.person.name}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>性别：</b>
                                                {{scope.row.person.sex}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>手机号：</b>
                                                {{scope.row.person.mobile}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>座机：</b>
                                                {{scope.row.person.phone}}
                                            </el-col>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="收货人地址">
                                        <template slot-scope="scope">
                                            <el-col :span="24">
                                                <b>省份：</b>
                                                {{scope.row.address.province}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>城市：</b>
                                                {{scope.row.address.city}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>区域：</b>
                                                {{scope.row.address.area}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>详细地址：</b>
                                                {{scope.row.address.detailAddress}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>邮编：</b>
                                                {{scope.row.address.zipCode}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>备注：</b>
                                                {{scope.row.address.remarks}}
                                            </el-col>
                                            <el-col :span="24">
                                                <el-button type="primary" size="small" @click="formVisible = true;addressDialogFormVisible = true;dialogTitle='修改订单配送信息';">修改订单配送信息</el-button>
                                            </el-col>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="物流信息" width="150">
                                        <template slot-scope="scope">
                                            <el-col :span="24">
                                                <b>EXPRESS：</b>
                                                {{scope.row.logistics.express}}
                                            </el-col>
                                            <el-col :span="24">
                                                <b>物流单号：</b>
                                                {{scope.row.logistics.expressNo}}
                                            </el-col>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-dialog :title="dialogTitle" :visible.sync="formVisible">
                                    <el-form v-if="addressDialogFormVisible" :model="addressDataForm" :label-position="labelPosition">
                                        <el-form-item label="收货人姓名" :label-width="formLabelWidth">
                                            <el-input v-model="addressDataForm.name" placeholder="收货人姓名"></el-input>
                                        </el-form-item>
                                        <el-form-item label="地址区域" :label-width="formLabelWidth">
                                            <el-input v-model="addressDataForm.region" placeholder="地址区域"></el-input>
                                        </el-form-item>
                                        <el-form-item label="详细地址" :label-width="formLabelWidth">
                                            <el-input v-model="addressDataForm.addressDetail" placeholder="详细地址"></el-input>
                                        </el-form-item>
                                        <el-form-item label="邮编" :label-width="formLabelWidth">
                                            <el-input v-model="addressDataForm.zipCode" placeholder="邮编"></el-input>
                                        </el-form-item>
                                        <el-form-item label="手机" :label-width="formLabelWidth">
                                            <el-input v-model="addressDataForm.mobile" placeholder="手机"></el-input>
                                        </el-form-item>
                                        <el-form-item label="电话号码" :label-width="formLabelWidth">
                                            <el-input v-model="addressDataForm.phone" placeholder="电话号码"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <el-form v-if="deliverGoodsDialogFormVisible" :model="deliverGoodsDataForm" :label-position="labelPosition">
                                        <el-form-item label="物流方式" :label-width="formLabelWidth">
                                            <el-input v-model="deliverGoodsDataForm.express" placeholder="收货人姓名"></el-input>
                                        </el-form-item>
                                        <el-form-item label="车牌号" :label-width="formLabelWidth">
                                            <el-input v-model="deliverGoodsDataForm.expressNo" placeholder="车牌号"></el-input>
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button @click="formVisible = false;addressDialogFormVisible = false;deliverGoodsDialogFormVisible = false;" size="small">取 消</el-button>
                                        <el-button type="primary" @click="submitDataForm" size="small">
                                            <i class="fa fa-check fa-lg right-5" aria-hidden="true"></i>确 定
                                        </el-button>
                                    </div>
                                </el-dialog>
                            </el-col>
                        </el-row>
                        <el-row class="panel panel-info">
                            <el-col :span="24" class="panel-handing ">订单支付记录</el-col>
                            <el-col :span="24" class="panel-body">
                                <el-table :data="orderPayData" border >
                                    <el-table-column type="index" width="50">
                                    </el-table-column>
                                    <el-table-column prop="orderNo" label="商户订单号" width="160">
                                    </el-table-column>
                                    <el-table-column prop="payType" label="支付方式">
                                    </el-table-column>
                                    <el-table-column prop="payPrice" label="支付金额">
                                    </el-table-column>
                                    <el-table-column prop="payDate" label="支付时间">
                                    </el-table-column>
                                    <el-table-column prop="payState" label="支付状态">
                                    </el-table-column>
                                    <el-table-column prop="alipayTransactionNO" label="支付宝交易号" width="160">
                                    </el-table-column>
                                    <el-table-column prop="remarks" label="备注" width="80">
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="订单明细" name="2">
                        <div class="div-margin">
                            <el-table :data="orderDetailData" >
                                <el-table-column type="index" width="50" label="序号">
                                </el-table-column>
                                <el-table-column property="productNo" label="商品编号"
                                  width="160">
                                </el-table-column>
                                <el-table-column property="productName" label="商品名称" width="160">
                                </el-table-column>
                                <el-table-column property="spec" label="商品规格">
                                </el-table-column>
                                <el-table-column property="number" label="数量">
                                </el-table-column>
                                <el-table-column property="delivery" label="已发">
                                </el-table-column>
                                <el-table-column property="unitPrice" label="单价">
                                </el-table-column>
                                <el-table-column property="total" label="小计">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="订单日志" name="3">
                        <div class="div-margin">
                            <el-table :data="orderLogData" >
                                <el-table-column type="index" width="50" label="序号">
                                </el-table-column>
                                <el-table-column property="name" label="操作人"
                                  width="100">
                                </el-table-column>
                                <el-table-column property="type" label="操作人类型" width="100">
                                </el-table-column>
                                <el-table-column property="date" label="时间">
                                </el-table-column>
                                <el-table-column property="loginfo" label="日志">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="促销信息" name="4">
                        <div class="div-margin">
                            <el-table :data="orderPromotionData" >
                                <el-table-column type="index" width="50" label="序号">
                                </el-table-column>
                                <el-table-column property="id" label="促销编号"
                                  width="160">
                                </el-table-column>
                                <el-table-column property="name" label="促销名称">
                                </el-table-column>
                                <el-table-column property="discountPrice" label="优惠金额" width="80">
                                </el-table-column>
                                <el-table-column property="giveProductNo" label="赠送产品编号" width="160">
                                </el-table-column>
                                <el-table-column property="giveNumber" label="赠送数量" width="80">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="客户评价" name="5">
                        <div class="div-margin">
                            <el-table :data="orderEvaluateData" >
                                <el-table-column type="index" width="50" label="序号">
                                </el-table-column>
                                <el-table-column property="userName" label="评价人" width="200">
                                </el-table-column>
                                <el-table-column property="date" label="评价时间" width="200">
                                </el-table-column>
                                <el-table-column property="item" label="评价项"
                                  width="200">
                                </el-table-column>
                                <el-table-column property="content" label="评价内容">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-card>
    </el-row>
</template>
<script>
    import './orderdetail.scss';
    import router from '@/router/index';

    export default { 
        data () {
            return {
                buttonDisabled : [true, false, true, true, true, true],
                orderNo : "",
                pageTo : "",
                activeName : "1",
                orderData : [{
                    orderNo : "",
                    number : "10",
                    createDate : "2017-12-13 14:25:04",
                    orderState : "未审核",
                    payState : "待支付",
                    orderTotalPrice : "123.0",
                    productPrice : "12.3",
                    distributionFee : "0.0",
                    person : {
                        name : "张三",
                        sex : "男",
                        mobile : "15917399344",
                        phone : "8888888"
                    },
                    address : {
                        province : "广东省",
                        city : "广州市",
                        area : "白云区",
                        detailAddress : "大金钟路",
                        zipCode : "000000",
                        remarks : ""
                    },
                    logistics : {
                        express : "顺丰",
                        expressNo : "221916779906"
                    }
                }],
                orderPayData : [{
                    orderNo : "",
                    payType : "支付宝",
                    payPrice : "123.0",
                    payDate : "2017-12-13 14:25:04",
                    payState : "已支付",
                    alipayTransactionNO : "221916779906",
                    remarks : ""
                }],
                orderDetailData : [{
                    productNo : "20170724172333948",
                    productName : "1.63L×6罐厨邦金品生抽王",
                    spec : "罐",
                    number : "6罐(1件 0罐)",
                    delivery : "0",
                    unitPrice : "￥82.0/件  ￥13.7/罐",
                    total : "￥82.0"
                },{
                    productNo : "20170724172334005",
                    productName : "227g×48袋庄厨邦鸡粉",
                    spec : "包",
                    number : "12包(0件 12包)",
                    delivery : "0",
                    unitPrice : "￥244.0/件  ￥5.08/包",
                    total : "￥61.0"
                }],
                orderLogData : [{
                    name : "张三",
                    type : "业务员",
                    date : "2017-12-13 14:25:05",
                    loginfo : "【创建订单】用户创建订单"
                },{
                    name : "李四",
                    type : "管理员",
                    date : "2017-12-13 15:25:05",
                    loginfo : "【审核订单】管理员审核订单"
                }],
                orderPromotionData : [{
                    id : "20170724172333948",
                    name : "满多少送多少,不买就要亏一年",
                    discountPrice : "10",
                    giveProductNo : "20170724172333948",
                    giveNumber : "10"
                }],
                orderEvaluateData : [{
                    userName : "张三",
                    date : "2017-12-13 15:25:05",
                    item : "物流",
                    content : "真快"
                }],
                formVisible : false,
                addressDialogFormVisible : false,
                addressDataForm : {
                    name : "",
                    region : "",
                    addressDetail : "",
                    zipCode : "",
                    mobile : "",
                    phone : ""
                },
                formLabelWidth : "120px",
                labelPosition : this.global.labelPosition,
                deliverGoodsDialogFormVisible : false,
                deliverGoodsDataForm : {
                    express : "",
                    expressNo : ""
                },
                dialogTitle : "",
                goPage : this.global.goPage
            }
        },
        methods: {
            init : function(){
                this.$message.warning(`请求页面数据。`);
            },
            submitDataForm : function(){
                this.formVisible = false;
                if(this.addressDialogFormVisible){
                    this.$message.warning(`提交订单发货信息。`);
                    this.addressDialogFormVisible = false;
                }else if(this.deliverGoodsDialogFormVisible){
                    this.$message.warning(`提交地址修改记录。`);
                    this.deliverGoodsDialogFormVisible = false;
                }
                this.init();
            },
            returnPage : function(){
                this.goPage(this.$router, this.pageTo, {});
            }
        },
        watch: {
           
        },
        created: function(){
            this.orderNo = this.$route.params.orderNo;
            this.orderData[0].orderNo = this.orderNo;
            this.orderPayData[0].orderNo = this.orderNo;
            this.pageTo = this.$route.params.pageTo;
            console.info(this.orderNo);
            console.info(this.pageTo);
            this.init();
        },
        beforeDestroy:function(){
          
        }
    }
</script>